.scroll-to-example {
  background-color: #f3f3f3;
  border-radius: 3px;
  overflow: hidden;
  height: 300px;

  .mat-mdc-list-base {
    padding-top: 0;
  }

  ng-scrollbar {
    --scrollbar-track-color: rgba(0, 0, 0, 0.05);
    --scrollbar-thumb-color: var(--color-primary);
    --scrollbar-size: 12px;
    --scrollbar-padding: 6px;
    --scrollbar-border-radius: 8px;
    border-radius: 3px;
    border: 2px solid rgba(0, 0, 0, 0.05);
  }

  .example-item {
    display: flex;
    align-items: center;
    height: 50px;
    color: black;
    cursor: pointer;
    padding: 0 15px;

    &:nth-child(odd) {
      background: #f1ffff;
    }

    &:nth-child(even) {
      background: #ecf8ff;
    }

    &:hover {
      background: #d2d2ff;
    }
  }
}

.mat-mdc-card-content {
  position: relative;
}

.center-pointer {
  width: 24px;
  height: 24px;
  position: absolute;
  left: -5px;
  top: calc(50% - 12px);

  .mat-icon {
    color: var(--color-accent);
  }
}
